<template>
  <div class="user-management">
    <h2>用户管理</h2>
    <div class="user-content">
      <!-- 搜索和筛选 -->
      <el-form :inline="true" class="search-form">
        <el-form-item label="昵称">
          <el-input v-model="searchForm.nickname" placeholder="请输入内容" clearable />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="searchForm.idCard" placeholder="请输入内容" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" placeholder="请输入内容" clearable />
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="searchForm.userId" placeholder="请输入内容" clearable />
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            v-model="searchForm.gender"
            placeholder="全部"
            clearable
            class="gender-select"
          >
            <el-option label="全部" value="" />
            <el-option label="男" value="男">
              <template #default="{ selected }">
                <span :class="{ 'selected-option': selected }">男</span>
              </template>
            </el-option>
            <el-option label="女" value="女">
              <template #default="{ selected }">
                <span :class="{ 'selected-option': selected }">女</span>
              </template>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="searchForm.tag" default-first-option placeholder="全部" class="tag-select" popper-class="tag-select-dropdown">
            <el-option
              v-for="option in tagOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            >
              <template #default="{ selected }">
                <div class="tag-option-content">
                  <el-tag
                    :type="getTagType(option.value)"
                    effect="plain"
                    size="small"
                    class="tag-option-label"
                    :class="{ 'is-selected': selected }"
                  >
                    {{ option.label }}
                  </el-tag>
                </div>
              </template>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <div class="operation-bar">
        <el-button @click="handleSearch">检索</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="addTag">添加标签</el-button>
        <el-button type="primary" @click="setValid">有效</el-button>
        <el-button type="danger" @click="setInvalid">无效</el-button>
        <el-button type="primary" @click="exportData">导出</el-button>
      </div>

      <!-- 用户列表 -->
      <el-table
        :data="currentPageData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="userId" label="用户ID" width="120" />
        <el-table-column prop="registerTime" label="注册时间" width="180" />
        <el-table-column prop="nickname" label="昵称" width="120" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="gender" label="性别" width="80" />
        <el-table-column prop="area" label="地区" width="120" />
        <el-table-column prop="totalSpent" label="消费金额" width="120">
          <template #default="scope">
            {{ scope.row.totalSpent }}元
          </template>
        </el-table-column>
        <el-table-column prop="orderCount" label="消费订单" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '有效' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="标签" width="200">
          <template #default="scope">
            <div class="tag-list">
              <el-tag
                v-for="tag in userTags(scope.row.tags)"
                :key="tag.label"
                :type="tag.type"
                effect="plain"
                size="small"
              >
                {{ tag.label }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template #default="scope">
            <el-button type="primary" link @click="viewDetail(scope.row)">
              查看
            </el-button>
            <el-button type="danger" link @click="setUserInvalid(scope.row)">
              无效
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[2, 5, 10, 20]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <div class="page-info">
          {{ pageSize }}条/页
        </div>
      </div>
    </div>

    <!-- 用户详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="用户信息"
      width="800px"
    >
      <div class="user-detail">
        <h3>用户信息</h3>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="用户ID">{{ currentUser.userId }}</el-descriptions-item>
          <el-descriptions-item label="昵称">{{ currentUser.nickname }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ currentUser.phone }}</el-descriptions-item>
          <el-descriptions-item label="授权微信信息">{{ currentUser.wechat || 'weni_cccc' }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ currentUser.gender }}</el-descriptions-item>
          <el-descriptions-item label="地区">{{ currentUser.area }}</el-descriptions-item>
          <el-descriptions-item label="注册时间">{{ currentUser.registerTime }}</el-descriptions-item>
          <el-descriptions-item label="消费金额">{{ currentUser.totalSpent }}元</el-descriptions-item>
          <el-descriptions-item label="账号状态">
            <el-tag :type="currentUser.status === '有效' ? 'success' : 'danger'">
              {{ currentUser.status === '有效' ? '启用' : '禁用' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <h3 class="section-title">客户标签</h3>
        <div class="user-tags">
          <el-tag
            v-for="tag in userTags(currentUser.tags || [])"
            :key="tag.label"
            :type="tag.type"
            effect="plain"
          >
            {{ tag.label }}
          </el-tag>
        </div>

        <h3 class="section-title">提货人</h3>
        <el-table :data="pickupPersons" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="phone" label="手机号" width="150" />
          <el-table-column prop="area" label="团长社区" />
        </el-table>

        <h3 class="section-title">消费记录</h3>
        <div class="order-summary">
          <el-descriptions :column="4" border>
            <el-descriptions-item label="应收金额合计">¥{{ orderSummary.totalAmount }}</el-descriptions-item>
            <el-descriptions-item label="实收金额合计">¥{{ orderSummary.actualAmount }}</el-descriptions-item>
            <el-descriptions-item label="实收差额合计">¥{{ orderSummary.diffAmount }}</el-descriptions-item>
            <el-descriptions-item label="优惠金额合计">¥{{ orderSummary.discountAmount }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <el-table :data="currentPageOrders" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="orderId" label="订单号" width="180" />
          <el-table-column prop="amount" label="订单金额" width="120">
            <template #default="scope">{{ scope.row.amount }}元</template>
          </el-table-column>
          <el-table-column prop="actualAmount" label="实际支付金额" width="120">
            <template #default="scope">{{ scope.row.actualAmount }}元</template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag type="success">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="orderTime" label="订单时间" />
        </el-table>
        <!-- 订单列表分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="orderCurrentPage"
            v-model:page-size="orderPageSize"
            :page-sizes="[2, 5, 10, 20]"
            :total="orderList.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleOrderSizeChange"
            @current-change="handleOrderCurrentChange"
          />
          <div class="page-info">
            {{ orderPageSize }}条/页
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 添加标签对话框 -->
    <el-dialog
      v-model="tagDialogVisible"
      title="添加标签"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="tag-selection">
        <div class="tag-options">
          <el-button
            v-for="tag in availableTags"
            :key="tag.value"
            :class="{ 'is-selected': selectedTags.includes(tag.value) }"
            class="tag-option"
            @click="toggleTag(tag.value)"
          >
            {{ tag.label }}
          </el-button>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tagDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAddTags">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
interface SearchForm {
  nickname: string;
  idCard: string;
  phone: string;
  userId: string;
  gender: string;
  dateRange: [string, string] | [];
  tag: string;
}

const searchForm = reactive<SearchForm>({
  nickname: '',
  idCard: '',
  phone: '',
  userId: '',
  gender: '',  // 性别筛选
  dateRange: [],
  tag: ''  // 标签筛选
})

// 标签选项
const tagOptions = [
  { value: '', label: '全部' },
  { value: 'high-end', label: '高端客户' },
  { value: 'premium', label: '优质用户' },
  { value: 'multi-community', label: '多社区' },
  { value: 'other', label: '其他' }
]

// 过滤后的用户列表
const filteredUserList = computed(() => {
  return userList.value.filter(user => {
    // 标签筛选
    if (searchForm.tag) {
      if (searchForm.tag === 'other') {
        // "其他"标签表示没有任何标签的用户
        return user.tags.length === 0
      } else {
        // 检查用户是否有选中的标签
        return user.tags.includes(searchForm.tag)
      }
    }
    
    // 性别筛选
    if (searchForm.gender && user.gender !== searchForm.gender) {
      return false
    }
    
    // 其他筛选条件...
    if (searchForm.nickname && !user.nickname.includes(searchForm.nickname)) {
      return false
    }
    if (searchForm.phone && !user.phone.includes(searchForm.phone)) {
      return false
    }
    if (searchForm.userId && !user.userId.includes(searchForm.userId)) {
      return false
    }
    // 日期筛选
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      const registerDate = new Date(user.registerTime)
      const start = new Date(searchForm.dateRange[0])
      const end = new Date(searchForm.dateRange[1])
      if (registerDate < start || registerDate > end) {
        return false
      }
    }
    return true
  })
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(2) // 默认显示2条
const total = ref(10)

// 计算当前页显示的数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredUserList.value.slice(start, end)
})

// 选中的用户
const selectedUsers = ref<UserData[]>([])

// 用户列表数据类型
interface UserData {
  userId: string;
  registerTime: string;
  nickname: string;
  phone: string;
  gender: string;
  area: string;
  totalSpent: string;
  orderCount: string;
  status: string;
  tags: string[];
  wechat?: string;
}

// 持久化userList到localStorage
const USER_LIST_KEY = 'userManagementList'
function loadUserList() {
  const local = localStorage.getItem(USER_LIST_KEY)
  if (local) {
    try {
      return JSON.parse(local)
    } catch {
      return []
    }
  }
  // 默认数据
  return [
    {
      userId: '20200200003',
      registerTime: '2020-02-14 14:30:30',
      nickname: '张小明',
      phone: '18555555555',
      gender: '女',
      area: '海淀区',
      totalSpent: '2000.00',
      orderCount: '100',
      status: '有效',
      tags: ['high-end', 'premium']
    },
    {
      userId: '20200200004',
      registerTime: '2020-03-15 09:20:10',
      nickname: '李华',
      phone: '13666666666',
      gender: '男',
      area: '朝阳区',
      totalSpent: '3500.00',
      orderCount: '150',
      status: '有效',
      tags: ['multi-community']
    },
    {
      userId: '20200200005',
      registerTime: '2020-04-01 16:45:20',
      nickname: '王芳',
      phone: '13777777777',
      gender: '女',
      area: '西城区',
      totalSpent: '1800.00',
      orderCount: '80',
      status: '有效',
      tags: ['high-end']
    },
    {
      userId: '20200200006',
      registerTime: '2020-04-15 11:10:30',
      nickname: '赵伟',
      phone: '13888888888',
      gender: '男',
      area: '东城区',
      totalSpent: '4200.00',
      orderCount: '200',
      status: '有效',
      tags: ['premium']
    },
    {
      userId: '20200200007',
      registerTime: '2020-05-01 10:30:00',
      nickname: '陈静',
      phone: '13999999999',
      gender: '女',
      area: '丰台区',
      totalSpent: '2800.00',
      orderCount: '120',
      status: '有效',
      tags: ['multi-community']
    },
    {
      userId: '20200200008',
      registerTime: '2020-05-15 14:20:40',
      nickname: '杨明',
      phone: '13000000000',
      gender: '男',
      area: '石景山区',
      totalSpent: '3200.00',
      orderCount: '160',
      status: '有效',
      tags: ['high-end']
    },
    {
      userId: '20200200009',
      registerTime: '2020-06-01 09:15:50',
      nickname: '周红',
      phone: '13111111111',
      gender: '女',
      area: '通州区',
      totalSpent: '1500.00',
      orderCount: '70',
      status: '有效',
      tags: ['premium']
    },
    {
      userId: '20200200010',
      registerTime: '2020-06-15 15:40:20',
      nickname: '吴强',
      phone: '13222222222',
      gender: '男',
      area: '大兴区',
      totalSpent: '3800.00',
      orderCount: '180',
      status: '有效',
      tags: ['multi-community']
    },
    {
      userId: '20200200011',
      registerTime: '2020-07-01 13:25:30',
      nickname: '郑丽',
      phone: '13333333333',
      gender: '女',
      area: '昌平区',
      totalSpent: '2500.00',
      orderCount: '110',
      status: '有效',
      tags: ['high-end']
    },
    {
      userId: '20200200012',
      registerTime: '2020-07-15 10:50:40',
      nickname: '孙建',
      phone: '13444444444',
      gender: '男',
      area: '顺义区',
      totalSpent: '4500.00',
      orderCount: '220',
      status: '有效',
      tags: ['premium']
    }
  ]
}
const userList = ref<UserData[]>(loadUserList())
watch(userList, (val) => {
  localStorage.setItem(USER_LIST_KEY, JSON.stringify(val))
}, { deep: true })

// 搜索处理
const handleSearch = () => {
  console.log('搜索条件:', searchForm)
  // TODO: 调用API进行搜索
}

// 重置搜索
const resetSearch = () => {
  const keys = Object.keys(searchForm) as (keyof SearchForm)[]
  keys.forEach(key => {
    if (key === 'dateRange') {
      searchForm[key] = [] as [string, string] | []
    } else {
      searchForm[key] = ''  // 重置为空，会显示"全部"
    }
  })
}

// 添加标签
const addTag = () => {
  if (selectedUsers.value.length === 0) {
    ElMessage.warning('请选择用户')
    return
  }
  selectedTags.value = [] // 重置选中的标签
  tagDialogVisible.value = true
}

// 批量设置无效状态
const setInvalid = () => {
  if (selectedUsers.value.length === 0) {
    ElMessage.warning('请先选择要设置为无效的用户')
    return
  }
  selectedUsers.value.forEach(user => {
    const u = userList.value.find(item => item.userId === user.userId)
    if (u) u.status = '无效'
  })
  ElMessage.success('设置无效成功')
}

// 批量设置有效状态
const setValid = () => {
  if (selectedUsers.value.length === 0) {
    ElMessage.warning('请选择用户')
    return
  }
  ElMessageBox.confirm(
    `确定要将选中的用户设置为有效状态吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      customClass: 'custom-message-box',
      confirmButtonClass: 'el-button--primary',
      cancelButtonClass: 'custom-cancel-button'
    }
  ).then(() => {
    // 更新选中用户的状态
    selectedUsers.value.forEach(selectedUser => {
      const index = userList.value.findIndex(user => user.userId === selectedUser.userId)
      if (index !== -1) {
        userList.value[index].status = '有效'
      }
    })
    ElMessage.success('设置成功')
  }).catch(() => {
    // 用户点击取消，不做任何操作
  })
}

// 导出数据
const exportData = () => {
  ElMessage.success('开始导出数据')
}

// 用户详情对话框
const detailDialogVisible = ref(false)
const currentUser = ref({} as any)

// 提货人列表
const pickupPersons = ref([
  {
    name: '张四',
    phone: '18200001100',
    area: '海淀区万达广场'
  },
  {
    name: '张四',
    phone: '18200001100',
    area: '海淀区万达广场'
  },
  {
    name: '张四',
    phone: '18200001100',
    area: '海淀区万达广场'
  }
])

// 订单汇总数据
const orderSummary = ref({
  totalAmount: '1,000.00',
  actualAmount: '1,000.00',
  diffAmount: '1,000.00',
  discountAmount: '1,000.00'
})

// 订单列表数据
const orderList = ref([
  {
    orderId: '20200203112220001',
    amount: '50',
    actualAmount: '45',
    status: '已完成',
    orderTime: '2020-02-24 14:12:30'
  },
  {
    orderId: '20200203112220001',
    amount: '50',
    actualAmount: '45',
    status: '已完成',
    orderTime: '2020-02-24 14:12:30'
  },
  {
    orderId: '20200203112220001',
    amount: '50',
    actualAmount: '45',
    status: '已完成',
    orderTime: '2020-02-24 14:12:30'
  }
])

// 订单列表分页
const orderCurrentPage = ref(1)
const orderPageSize = ref(5)

// 计算当前页的订单数据
const currentPageOrders = computed(() => {
  const start = (orderCurrentPage.value - 1) * orderPageSize.value
  const end = start + orderPageSize.value
  return orderList.value.slice(start, end)
})

// 处理订单分页大小变化
const handleOrderSizeChange = (val: number) => {
  orderPageSize.value = val
  orderCurrentPage.value = 1
}

// 处理订单页码变化
const handleOrderCurrentChange = (val: number) => {
  orderCurrentPage.value = val
}

// 重置订单分页
const resetOrderPagination = () => {
  orderCurrentPage.value = 1
  orderPageSize.value = 2
}

// 查看用户详情时重置订单分页
const viewDetail = (row: any) => {
  currentUser.value = row
  detailDialogVisible.value = true
  resetOrderPagination() // 重置订单分页
}

// 设置用户无效
const setUserInvalid = (row: any) => {
  ElMessageBox.confirm(
    `确定要设置 ${row.nickname} 无效吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      customClass: 'custom-message-box',
      confirmButtonClass: 'custom-confirm-button',
      cancelButtonClass: 'custom-cancel-button'
    }
  ).then(() => {
    // 更新用户状态
    const index = userList.value.findIndex(user => user.userId === row.userId)
    if (index !== -1) {
      userList.value[index].status = '无效'
    }
    ElMessage.success('设置成功')
  }).catch(() => {
    // 用户点击取消，不做任何操作
  })
}

// 表格选择变化
const handleSelectionChange = (val: any[]) => {
  selectedUsers.value = val
}

// 处理分页大小变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

// 处理页码变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // TODO: 重新加载数据
}

// 标签对话框相关
const tagDialogVisible = ref(false)
const selectedTags = ref<string[]>([])
const availableTags = [
  { label: '高端客户', value: 'high-end' },
  { label: '优质客户', value: 'premium' },
  { label: '多社区', value: 'multi-community' }
]

// 切换标签选择
const toggleTag = (tagValue: string) => {
  const index = selectedTags.value.indexOf(tagValue)
  if (index === -1) {
    selectedTags.value.push(tagValue)
  } else {
    selectedTags.value.splice(index, 1)
  }
}

// 标签映射类型
interface TagInfo {
  label: string;
  type: 'success' | 'warning' | 'info' | 'danger' | 'primary';
}

interface TagMap {
  [key: string]: TagInfo;
}

// 标签映射
const tagMap: TagMap = {
  'high-end': { label: '高端客户', type: 'danger' },
  'premium': { label: '优质客户', type: 'info' },
  'multi-community': { label: '多社区', type: 'warning' }
}

// 在用户列表中显示标签
const userTags = computed(() => (tags: string[]) => {
  return tags.map(tag => ({
    label: tagMap[tag]?.label || tag,
    type: tagMap[tag]?.type || 'info'
  }))
})

// 确认添加标签
const confirmAddTags = () => {
  if (selectedTags.value.length === 0) {
    ElMessage.warning('请选择标签')
    return
  }

  // 更新选中用户的标签
  selectedUsers.value.forEach(selectedUser => {
    const user = userList.value.find(u => u.userId === selectedUser.userId)
    if (user) {
      // 合并现有标签和新标签，去重
      const newTags = [...new Set([...user.tags, ...selectedTags.value])]
      user.tags = newTags
    }
  })

  ElMessage.success('添加标签成功')
  tagDialogVisible.value = false
}

// 获取标签类型
const getTagType = (value: string): 'success' | 'primary' | 'warning' | 'info' | 'danger' | undefined => {
  switch (value) {
    case 'high-end':
      return 'danger'
    case 'premium':
      return 'info'
    case 'multi-community':
      return 'warning'
    default:
      return 'info'  // 默认使用 info 类型
  }
}

// 随机添加标签
const addRandomTags = () => {
  if (selectedUsers.value.length === 0) {
    ElMessage.warning('请选择要添加标签的用户')
    return
  }

  const allTags = ['high-end', 'premium', 'multi-community']
  
  // 为每个选中的用户添加随机标签
  selectedUsers.value.forEach(selectedUser => {
    const user = userList.value.find(u => u.userId === selectedUser.userId)
    if (user) {
      // 随机选择1-2个新标签
      const numNewTags = Math.floor(Math.random() * 2) + 1
      const availableTags = allTags.filter(tag => !user.tags.includes(tag))
      const shuffledTags = [...availableTags].sort(() => Math.random() - 0.5)
      const newTags = shuffledTags.slice(0, numNewTags)
      
      // 合并现有标签和新标签
      user.tags = [...new Set([...user.tags, ...newTags])]
    }
  })

  ElMessage.success('随机添加标签成功')
}
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.user-content {
  margin-top: 20px;
}

.search-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.operation-bar {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.page-info {
  color: #606266;
  font-size: 14px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 20px;
  margin-bottom: 20px;
}

:deep(.el-input) {
  width: 200px;
}

:deep(.el-date-editor) {
  width: 320px;
}

.user-detail {
  padding: 20px;
}

.section-title {
  margin: 30px 0 15px;
  font-size: 16px;
  font-weight: bold;
}

.user-tags {
  margin: 15px 0;
  display: flex;
  gap: 10px;
}

.order-summary {
  margin: 15px 0;
}

:deep(.el-descriptions__label) {
  width: 120px;
  justify-content: flex-end;
}

:deep(.custom-message-box) {
  padding: 20px;
}

:deep(.custom-message-box .el-message-box__header) {
  padding: 0 0 10px 0;
}

:deep(.custom-message-box .el-message-box__title) {
  font-size: 16px;
}

:deep(.custom-message-box .el-message-box__content) {
  padding: 20px 0;
  font-size: 14px;
}

:deep(.custom-message-box .el-message-box__btns) {
  padding: 10px 0 0 0;
}

:deep(.custom-confirm-button) {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

:deep(.custom-confirm-button:hover) {
  background-color: #f78989;
  border-color: #f78989;
}

:deep(.custom-cancel-button) {
  border-color: #dcdfe6;
  color: #606266;
}

:deep(.custom-cancel-button:hover) {
  border-color: #c6e2ff;
  color: #409eff;
  background-color: #ecf5ff;
}

.tag-selection {
  padding: 20px 0;
}

.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-option {
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  padding: 8px 20px;
}

.tag-option.is-selected {
  background-color: #f0f9eb;
  color: #67c23a;
  border-color: #c2e7b0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag-list .el-tag {
  margin-right: 4px;
  margin-bottom: 4px;
}

.gender-select {
  width: 120px;
}

.selected-option {
  color: var(--el-color-primary);
  font-weight: bold;
}

/* 确保下拉选项有足够的内边距 */
:deep(.el-select-dropdown__item) {
  padding: 0 12px;
}

/* 选中项的背景色 */
:deep(.el-select-dropdown__item.selected) {
  background-color: var(--el-color-primary-light-9);
}

.tag-select {
  width: 140px;
}

.tag-option-content {
  display: flex;
  align-items: center;
  padding: 2px 0;
}

.tag-option-label {
  width: 100%;
  text-align: center;
}

.tag-option-label.is-selected {
  font-weight: bold;
}

:deep(.el-select-dropdown__item) {
  padding: 0 12px;
}

:deep(.el-select-dropdown__item.selected) {
  background-color: var(--el-color-primary-light-9);
}

:deep(.el-tag) {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 选中项的样式 */
:deep(.el-select__tags .el-tag) {
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-5);
  color: var(--el-color-primary);
}
</style> 